import React, { useEffect, useRef } from 'react'
import { Card, Form, Input, Button, message, Select } from 'antd'
import { SaveOutlined } from '@ant-design/icons'
const MyComponent = () => {
  // 创建一个 ref 来引用 iframe
  const iframeRef = useRef(null)

  useEffect(() => {
    // 确保 iframe 已经被挂载到 DOM 中
    if (iframeRef.current) {
      // 监听 iframe 的 load 事件
      iframeRef.current.onload = () => {
        // iframe 加载完成后发送消息
        iframeRef.current.contentWindow.postMessage(
          { code: 1001 },
          'https://online.mpython.cn/'
        )
      }

      // 如果 iframe 已经加载（例如，来自缓存），则直接发送消息
      if (iframeRef.current.contentWindow.document.readyState === 'complete') {
        iframeRef.current.contentWindow.postMessage(
          { code: 1001 },
          'https://online.mpython.cn/'
        )
      }
    }

    // 清理函数（如果需要的话）
    return () => {
      // 移除事件监听器（如果需要的话）
      if (iframeRef.current) {
        iframeRef.current.onload = null
      }
    }
  }, []) // 空数组表示这个 effect 只在组件挂载和卸载时运行
  const clFna = () => {}
  const Derive = () => {
    iframeRef.current.contentWindow.postMessage(
      { code: 1005 },
      'https://online.mpython.cn/'
    )
  }
  window.addEventListener('message', function (ev) {
    if (ev.data.code === 104) {
      console.log(ev.data.param)
    }
  })
  return (
    <div>
      <div className="ct">
        <div className="ban">
          <div className="tetli">Python</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <div className="add">
            <div
              style={{
                margin: '15px 0',
              }}
            >
              <Button type="primary" icon={<SaveOutlined />} onClick={Derive}>
                提交作品
              </Button>
              <Button style={{ marginLeft: '15px' }} onClick={clFna}>
                我的作品
              </Button>
              <Button style={{ marginLeft: '15px' }} onClick={clFna}>
                班级作品展示
              </Button>
            </div>
          </div>
        </div>
        <div style={{}}>
          <iframe
            ref={iframeRef}
            id="iframeContent"
            src="https://online.mpython.cn/"
            width="100%"
            height="700px"
            title="My IFrame"
          />
        </div>
      </div>
    </div>
  )
}

export default MyComponent
